<template>
	<view class="outLine">
		<view class="item" v-for="(item, index) in selectCartList">
			<!--      <image
        src="../../../static/images/home/Snipaste_2024-11-18_16-14-45.png"
        mode=""
      ></image> -->
			<image :src="baseImgUrl + item.goodImg"></image>
			<view class="itemInfo">
				<view class="itemInfoTitle">
					<view>{{ item.goodName }}</view>
					<view>云库存:{{ item.goodInventory }}</view>
				</view>
				<view class="cart-num">
					<view class="symbol" @click="
              handleOperateCount({
                type: 'del',
                item,
                index,
              })
            ">–</view>
					<view class="count">
						{{ item.count }}
					</view>
					<view class="add" @click="
              handleOperateCount({
                type: 'add',
                item,
                index,
              })
            ">+</view>
				</view>
			</view>
		</view>
		<view class="user" @click="toAddressPage">
			<view class="userInfo">
				<view class="infoi">
					<view class="label">姓名:</view>
					<view class="Value">{{ defaultAddress.realName }}</view>
				</view>
				<view class="infoi">
					<view class="label">电话:</view>
					<view class="Value">{{ defaultAddress.phone }}</view>
				</view>
				<view class="infoi">
					<view class="label">地址:</view>
					<view class="Value">{{
            defaultAddress.province +
            defaultAddress.city +
            defaultAddress.district +
            defaultAddress.detail
          }}</view>
				</view>
				<view class="infoi">
					<view class="label">进货总价:</view>
					<view class="Value">{{ costPrice }}元</view>
				</view>
				<view class="infoi">
					<view class="label">运费:</view>
					<view class="Value">{{ numberPrice }}元</view>
				</view>

			</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="">
			<view style="font-weight: 600; margin: 6rpx 0 12rpx 0">备注：</view>
			<uni-easyinput type="textarea" v-model="remark" placeholder="请输入货品备注" />
		</view>
		<view class="bottom">
			<button type="default" class="black" @click="submit" :plain="true">
				确定
			</button>
		</view>

		<PaymentPopup :show="paymentPopupShow" :price="numberPrice" :orderId="orderId" @close="popupClose"
			@submit="popupSubmit" />
	</view>
</template>

<script>
	import addressApi from "@/api/address";
	import mineApi from "@/api/mine";
	import PaymentPopup from "@/components/payment-popup/index";
	import {
		baseImgUrl
	} from "@/config";
	export default {
		components: {
			PaymentPopup,
		},
		data() {
			return {
				paymentPopupShow: false,
				orderId: "",

				baseImgUrl,
				remark: "",
				selectCartList: [],
				defaultAddress: {
					province: '',
					city: '',
					district: '',
					detail: '',
				},
				numberPrice: 0,
				costPrice: 0,
				ids: []
			};
		},
		onShow() {
			this.getCostList()
			let selectedAddress = uni.getStorageSync("selectedAddress");
			if (!selectedAddress.city) return;
			this.defaultAddress = selectedAddress;
			uni.removeStorageSync("selectedAddress");
		},
		onLoad(option) {
			this.selectCartList = JSON.parse(decodeURIComponent(option.params));
			this.ids = this.selectCartList.map(item => item.goodId);
			this.getDefaultAddress();
		},
		watch: {
			selectCartList: {
				handler() {
					this.calculatePrice();
				},
				deep: true,
			},
		},
		methods: {
			popupSubmit() {
				mineApi.payCloudInventoryOrder({
					orderId: this.orderId
				}).then((res) => {
					uni.showToast({
						title: "提取成功！",
						icon: "none",
					});
					setTimeout(() => {
						uni.redirectTo({
							url: `/subPages/myOrder/detail?id=${res.msg}`,
						});
					}, 1500);
				})
			},
			popupClose(row) {
				if (row) {
					mineApi.cloudInventory({
						orderId: this.orderId
					})
				}
				this.paymentPopupShow = false;
			},
			getCostList() {
				mineApi.getCostList({
					list: this.selectCartList
				}).then((res) => {
					this.numberPrice = res.data.price
					this.costPrice = res.data.costPrice
				})
			},
			// 获取默认地址
			getDefaultAddress() {
				// addressApi.getDefaultAddress().then((res) => {
				//   if (res.code == 200) {
				//     if (res.data) {
				//       this.defaultAddress = res.data;
				//       console.log(this.defaultAddress);
				//     }
				//   }
				// });
				addressApi.addressList().then((res) => {
					if (res.code == 200) {
						if (res.rows.length > 0) {
							this.defaultAddress = res.rows[0];
						}
					}
				});
			},
			handleOperateCount(params) {
				if (params.type == "add") {
					if (params.item.count >= params.item.goodInventory) {
						uni.showToast({
							title: "提货数量不能超过库存数量",
							icon: "none",
						});
						return;
					}
					this.selectCartList[params.index].count += 1;
					this.getCostList()
				} else {
					if (this.selectCartList[params.index].count <= 1) {
						uni.showModal({
							title: "提示",
							content: "确认删除该商品吗？",
							cancelText: "取消",
							confirmText: "确定",
							success: (modalRes) => {
								if (modalRes.confirm) {
									this.selectCartList.splice(params.index, 1);
									this.getCostList()
								}
							},
						});
					} else {
						this.selectCartList[params.index].count -= 1;
						this.getCostList()
					}
				}
			},
			toAddressPage() {
				uni.navigateTo({
					url: "/subPages/mine/myAddress?source=order",
				});
			},
			submit() {
				if (this.defaultAddress.province == '') {
					uni.showToast({
						title: "请添加地址！",
						icon: "none",
					});
					return
				}
				let coludInventoryGoodDtos = this.selectCartList.map((item) => {
					return {
						goodId: item.goodId,
						goodNum: item.count,
					};
				});
				let bdmReceiveAddress = {
					...this.defaultAddress
				};
				let data = {
					coludInventoryGoodDtos,
					bdmReceiveAddress,
					remark: this.remark,
					costPrice: this.numberPrice
				};
				if (!this.remark) {
					delete data.remark;
				}
				mineApi.cloudInventoryPickup(data).then((res) => {
					if (res.code == 200) {
						this.orderId = res.msg
						this.paymentPopupShow = true

						// uni.showToast({
						// 	title: "提取成功！",
						// 	icon: "none",
						// });
						// setTimeout(() => {
						// 	uni.redirectTo({
						// 		url: `/subPages/myOrder/detail?id=${res.msg}`,
						// 	});
						// }, 1500);
					}
				});
			},
			calculatePrice() {
				console.log(this.selectCartList, "this.selectCartList");
			},
		},
	};
</script>

<style lang="less" scoped>
	.outLine {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #fff;

		.item {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 0 18rpx -6rpx #a7a2a2;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 16rpx;

			image {
				width: 130rpx;
				height: 130rpx;
			}

			.itemInfo {
				color: #000;
				font-weight: 500;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 130rpx;
				margin-left: 20rpx;
				font-size: 34rpx;
				width: calc(100% - 160rpx);

				.itemInfoTitle {
					display: flex;
					flex-direction: column;
					height: 130rpx;
					justify-content: space-between;
				}

				.cart-num {
					display: flex;
					font-size: 28rpx;

					.count {
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
					}

					.symbol {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border: 1px solid #000;
						color: #000;
						border-radius: 15rpx;
					}

					.add {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border: 1rpx solid #000;
						background: #000;
						color: #fff;
						border-radius: 15rpx;
					}
				}
			}
		}

		.user {
			width: 100%;
			height: 200rpx;
			background: #f8f8f8;
			border-radius: 16rpx;
			margin: 40rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 24rpx;
			box-sizing: border-box;

			.userInfo {
				width: 90%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.infoi {
					font-size: 27rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.label {
						min-width: 70rpx;
						color: #979797;
					}

					.Value {
						flex: 1;
						color: #000;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.bottom {
			border-top: 1px solid #dddddd;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 150rpx;
			position: absolute;
			bottom: 0;
			left: 0;

			.black {
				background-color: #000;
				color: #fff;
				border-radius: 50rpx;
				width: 80%;
			}
		}
	}
</style>